<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小米商城主页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="./js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="css/carousel.css" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background-color: #fff;
        font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    }
    
    main {
        width: 100%;
        background-color: #fff;
        box-shadow: 0px 3px 4px #eeeeee;
    }
    /*顶部导航栏*/
    
    header {
        width: 100%;
        height: 40px;
        min-width: 1226px;
        background-color: #333333;
    }
    
    nav {
        width: 1226px;
        margin: auto;
        background-color: #333333;
        box-sizing: border-box;
    }
    
    .top-ul {
        list-style-type: none;
    }
    
    .top-li {
        float: left;
    }
    
    .top-li a {
        text-decoration: none;
        line-height: 40px;
        color: #b0b0b0;
        font-size: 12px;
        padding: 0 6px;
        border-right: 1px solid #423d39;
    }
    
    .top-li:nth-of-type(1) a {
        padding: 0;
        padding-right: 8px;
    }
    
    .top-li:last-child a {
        border: none;
    }
    
    .top-li a:hover {
        color: #fff;
    }
    
    .top-right {
        float: right;
        position: relative;
        background-color: #333333;
    }
    
    .top-right span {
        color: #b0b0b0;
        font-size: 12px;
        line-height: 40px;
        cursor: pointer;
    }
    
    .top-right-one,
    .top-right-two {
        padding: 0 4px;
        border-right: 1px solid #423d39;
    }
    
    .top-right-three {
        display: inline-block;
        margin-right: 20px;
        padding-left: 7px;
    }
    
    .top-right-one:hover {
        color: #FFF;
    }
    
    .top-right-two:hover {
        color: #FFF;
    }
    
    .top-right-three:hover {
        color: #fff;
    }
    
    .top-right-four:hover {
        background-color: #fff;
        color: #ff6700;
    }
    
    .top-right-four {
        display: inline-block;
        width: 120px;
        height: 40px;
        background-color: #424242;
        text-align: center;
        background-image: url('./index-images/buy.png');
        background-repeat: no-repeat;
        background-position: 10px 12px;
    }
    
    .top-right-four:hover {
        background-image: url('./index-images/buy2.png');
    }
    
    .shop {
        width: 318px;
        height: 100px;
        position: absolute;
        top: 40px;
        right: 0px;
        z-index: 10;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        line-height: 100px;
        color: #424242;
        display: none;
    }
    /*第二个导航区域*/
    
    .content_1 {
        width: 1226px;
        height: 100px;
        margin: auto;
        min-width: 1226px;
    }
    
    .content_1-logo {
        width: 55px;
        height: 55px;
        float: left;
        margin-top: 22.5px;
        margin-right: 15px;
        cursor: pointer;
    }
    
    .content_1-logo img {
        width: 55px;
        height: 55px;
    }
    
    .content_1-pro {
        float: left;
        margin-top: 17px;
        margin-right: 11px;
        cursor: pointer;
    }
    
    .content_1-ul {
        list-style-type: none;
    }
    
    .content_1-li {
        float: left;
        line-height: 100px;
        color: #333333;
    }
    
    .content_1-li a {
        display: inline-block;
        height: 100px;
        text-decoration: none;
        color: #333333;
        font-size: 16px;
        margin-right: 20px;
    }
    
    .content_1-li a:hover {
        color: #ff6700;
    }
    
    .content_1-search {
        float: right;
        margin-top: 25px;
        position: relative;
        width: 295px;
        height: 50px;
        z-index: 9;
    }
    
    .content_1-search input[type="text"] {
        width: 295px;
        height: 50px;
        border: 1px solid #e0e0e0;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .content_1-search input[type="text"]:hover {
        border-color: #b0b0b0;
    }
    
    .content_1-search-one {
        display: inline-block;
        text-decoration: none;
        color: #757575;
        font-size: 12px;
        text-align: center;
        background-color: #eeeeee;
        width: 100px;
        height: 18px;
        position: absolute;
        top: 16px;
        left: 48px;
    }
    
    .content_1-search-two {
        display: inline-block;
        text-decoration: none;
        color: #757575;
        font-size: 12px;
        text-align: center;
        background-color: #eeeeee;
        width: 84px;
        height: 18px;
        position: absolute;
        top: 16px;
        right: 60px;
    }
    
    .content_1-search-one:hover {
        color: #fff;
        background-color: #ff6700;
    }
    
    .content_1-search-two:hover {
        color: #fff;
        background-color: #ff6700;
    }
    
    .content_1-search .content_1-search-p {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        text-align: center;
        border-left: 1px solid #e0e0e0;
        box-sizing: border-box;
        background-image: url('./index-images/search.png');
        background-repeat: no-repeat;
        background-position: 15px 16px;
    }
    
    .content_1-search-p:hover {
        background-color: #ff6700;
        color: #fff;
        background-image: url('./index-images/search2.png');
    }
    
    .keyword-search {
        width: 246px;
        height: 291px;
        border: 1px solid #ff6700;
        border-top: none;
        box-sizing: border-box;
        z-index: 9999;
        background-color: #fff;
        display: none;
    }
    
    .keyword-search .keyword-search-list {
        list-style-type: none;
        z-index: 9999;
    }
    
    .keyword-search .keyword-search-list li a {
        display: block;
        position: relative;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
    }
    
    .keyword-search-list span {
        position: absolute;
        font-size: 12px;
        color: #b0b0b0;
        right: 15px;
    }
    
    .keyword-search .keyword-search-list li a:hover {
        background-color: #fafafa;
    }
    /*第二部分下拉菜单*/
    
    .content_1-menu {
        width: 100%;
        min-width: 1226px;
        height: 230px;
        border-top: 1px solid #e0e0e0;
        box-sizing: border-box;
        box-shadow: 0px 3px 4px #cccccc;
        background-color: #fff;
        display: none;
        position: absolute;
        top: 140px;
        left: 0px;
        z-index: 10;
    }
    
    .container-menu {
        width: 1226px;
        margin: auto;
        position: relative;
    }
    
    .container-menu ul {
        list-style-type: none;
        margin-left: 15px;
        position: absolute;
    }
    
    .container-menu ul li {
        float: left;
        padding: 35px 12px 0;
        text-align: center;
        font-size: 12px;
    }
    
    .container-menu ul li div {
        border-right: 1px solid #e0e0e0;
    }
    
    .container-menu ul li:last-child div {
        border: none;
    }
    
    .container-menu ul li p {
        line-height: 20px;
    }
    
    .container-menu ul li p:nth-of-type(1) {
        margin-top: 10px;
        color: #333333;
    }
    
    .container-menu ul li p:nth-of-type(2) {
        color: #ff6700;
    }
    
    #four li img {
        width: 160px;
        height: 110px;
    }
    /*第三个导航区域*/
    
    .content_2 {
        width: 1226px;
        margin: 0 auto;
        height: 460px;
        position: relative;
        overflow: hidden;
    }
    
    .content_2-container {
        position: relative;
    }
    
    .content_2-container .banner {
        width: 8582px;
        position: absolute;
        left: 0px;
    }
    
    .content_2-container .banner img {
        float: left;
    }
    
    .content_2-container .banner_prev {
        display: inline-block;
        width: 41px;
        height: 69px;
        background-image: url("./index-images/w-left.png");
        background-repeat: no-repeat;
        background-position: 10px 16px;
        opacity: 0.7;
        position: absolute;
        top: 195px;
        left: 234px;
    }
    
    .content_2-container .banner_prev:hover {
        background-image: url("./index-images/b-left.png");
        background-repeat: no-repeat;
        background-position: 10px 16px;
        background-color: #747577;
        border-bottom-right-radius: 2px;
        border-top-right-radius: 2px;
    }
    
    .content_2-container .banner_next {
        display: inline-block;
        width: 41px;
        height: 69px;
        background-image: url("./index-images/w-right.png");
        background-repeat: no-repeat;
        background-position: 10px 16px;
        opacity: 0.7;
        position: absolute;
        top: 195px;
        right: 0;
    }
    
    .content_2-container .banner_next:hover {
        background-image: url("./index-images/b-right.png");
        background-repeat: no-repeat;
        background-position: 10px 16px;
        background-color: #747577;
        border-bottom-left-radius: 2px;
        border-top-left-radius: 2px;
    }
    
    .content_2-container .banner_btn {
        position: absolute;
        right: 30px;
        top: 425px;
    }
    
    .content_2-container .banner_btn span {
        display: inline-block;
        width: 6px;
        height: 6px;
        border: 2px solid #ADADAF;
        background-color: #87888B;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        float: left;
    }
    
    .content_2-container .banner_btn span:hover {
        border: 2px solid #87888B;
        background-color: transparent;
    }
    
    .circle {
        border: 2px solid #87888B!important;
        background-color: transparent!important;
    }
    /*轮播图列表*/
    
    .content_2 .banner_nav {
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        height: 460px;
        width: 234px;
        padding: 20px 0;
    }
    
    .content_2 .banner_nav_mask {
        position: absolute;
        left: 0;
        top: 0;
        height: 460px;
        width: 234px;
        background-color: #333;
        opacity: 0.7;
    }
    
    .content_2-ul {
        margin: 20px 0;
        list-style-type: none;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    
    .content_2-li {
        width: 234px;
        height: 42px;
        padding-left: 30px;
        box-sizing: border-box;
        position: relative;
    }
    
    .content_2-li-span {
        font-size: 14px;
        color: #fff;
        line-height: 42px;
    }
    
    .content_2-li:hover {
        background-color: #ff6700;
    }
    
    .content_2-li-img {
        position: absolute;
        top: 15px;
        right: 25px;
    }
    
    .content_2-hide {
        position: absolute;
        width: 796px;
        height: 460px;
        border-top: 1px solid #e0e0e0;
        background-color: #fff;
        box-shadow: 0px 2px 5px #000;
        display: none;
    }
    
    .content_2-hide div {
        display: inline-block;
        width: 265px;
        height: 75px;
        float: left;
        padding: 18px 10px 18px 20px;
        box-sizing: border-box;
        position: relative;
    }
    
    .content_2-hide div span:nth-of-type(1){
        position: absolute;
        left:72px;
        bottom:29px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
    }
    .content_2-hide div span:nth-of-type(1):hover{
        color:#ff6700;
    }
    .content_2-hide div span:nth-of-type(2){
        position: absolute;
        right: 10px;
        top: 26px;
        width: 58px;
        height: 22px;
        border:1px solid #ff6700;
        line-height: 22px;
        font-size: 12px;
        color: #ff6700;
        text-align: center;
        cursor: pointer;
    }
    .content_2-hide div span:nth-of-type(2):hover{
        color: #fff;
        background-color: #ff6700;
    }
    /*导航下部广告*/
    
    .mi-hero {
        width: 1226px;
        height: 170px;
        margin: 14px auto 26px;
        background-color: #fff;
    }
    
    .section-left {
        float: left;
        width: 234px;
        height: 170px;
        background-color: #5f5750;
    }
    
    .section-left .section-left-box {
        width: 78px;
        height: 85px;
        float: left;
        position: relative;
        cursor: pointer;
    }
    
    .section-left .section-left-box img {
        margin-top: 18px;
        margin-left: 28px;
    }
    
    .section-left .section-left-box p {
        font-size: 12px;
        text-align: center;
        color: #cfcdcb;
    }
    
    .section-right {
        width: 978px;
        margin-left: 14px;
        float: left;
    }
    
    .section-right div {
        width: 316px;
        height: 170px;
        margin-right: 15px;
        float: left;
        transition: linear 0.1s;
    }
    
    .section-right div:hover {
        box-shadow: 0px 6px 8px #cccccc;
        transform: translateY(-1px);
    }
    
    .section-right div:last-child {
        margin: 0px;
    }
    
    .section-right img {
        width: 316px;
        height: 170px;
    }
    
    .section-left-box div:nth-of-type(1) {
        width: 66px;
        height: 1px;
        background-color: #665e57;
        position: absolute;
        top: 84px;
        left: 7px;
    }
    
    .section-left-box div:nth-of-type(2) {
        width: 1px;
        height: 66px;
        background-color: #665e57;
        position: absolute;
        top: 10px;
        left: 80px;
    }
    
    .section-left-box:nth-of-type(4) {
        border: none;
    }
    
    .section-left-box:nth-of-type(5) {
        border: none;
    }
    
    .section-left-box:nth-of-type(4) div {
        width: 1px;
        height: 66px;
        background-color: #665e57;
        position: absolute;
        top: 10px;
        left: 80px;
    }
    
    .section-left-box:nth-of-type(5) div {
        width: 1px;
        height: 66px;
        background-color: #665e57;
        position: absolute;
        top: 10px;
        left: 80px;
    }
    /*小米明星单品*/
    
    .mi-star {
        width: 1226px;
        height: 438px;
        margin: auto;
        background-color: #fff;
        position: relative;
    }
    
    .mi-star-title {
        width: 100%;
        height: 58px;
        font-size: 22px;
        color: #333333;
        line-height: 58px;
        text-align: left;
    }
    
    .mi-star-right-button {
        width: 71px;
        height: 24px;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        position: absolute;
        top: 25px;
        right: 0;
    }
    
    .mi-star-right-button span {
        display: inline-block;
        float: left;
        width: 34px;
        height: 24px;
        cursor: pointer;
    }
    
    .mi-star-right-button span:nth-of-type(1) {
        border-right: 1px solid #e0e0e0;
        width: 34px;
        height: 24px;
        background-image: url('./index-images/mi-star-button-left.png');
        background-repeat: no-repeat;
        background-position: 12px 5px;
        box-sizing: border-box;
    }
    
    .mi-star-right-button span:nth-of-type(2) {
        background-image: url('./index-images/mi-star-button-right.png');
        background-repeat: no-repeat;
        background-position: 12px 5px;
    }
    
    .mi-star-content {
        width: 1226px;
        height: 340px;
        margin: auto;
        overflow: hidden;
    }
    
    .mi-star-box {
        width: 2452px;
        height: 340px;
        margin-left: 0;
    }
    
    .mi-star-content .mi-star-box div {
        width: 234px;
        height: 340px;
        margin-right: 14px;
        float: left;
        box-sizing: border-box;
        background-color: #fafafa;
    }
    
    .mi-star-content .mi-star-box div:nth-of-type(5) {
        margin: 0;
    }
    
    .mi-star-content .mi-star-box div:nth-of-type(10) {
        margin: 0;
    }
    
    .mi-star-content .mi-star-box div img {
        width: 160px;
        height: 160px;
        margin-top: 39px;
        margin-left: 33px;
    }
    
    .mi-star-content .mi-star-box div p {
        text-align: center;
        font-size: 12px;
    }
    
    .mi-star-content .mi-star-box div p:nth-of-type(1) {
        margin-top: 25px;
        font-size: 14px;
        color: #333333;
    }
    
    .mi-star-content .mi-star-box div p:nth-of-type(2) {
        margin-top: 5px;
        font-size: 12px;
        color: #b0b0b0;
    }
    
    .mi-star-content .mi-star-box div p:nth-of-type(3) {
        margin-top: 10px;
        font-size: 12px;
        color: #ff6700;
    }
    /*第二部分*/
    
    .second-div {
        width: 100%;
        background-color: #f5f5f5;
    }
    /*智能硬件*/
    
    .content-main {
        width: 100%;
        min-width: 1226px;
        padding-top: 60px;
        background-color: #f5f5f5;
    }
    
    .content-family {
        width: 1226px;
        height: 672px;
        margin: auto;
        margin-bottom: 22px;
        position: relative;
    }
    
    .content-family-title-left {
        width: 100%;
        height: 58px;
        font-size: 22px;
        color: #333333;
        line-height: 58px;
        text-align: left;
    }
    
    .content-family-title-right {
        width: 93px;
        height: 23px;
        font-size: 16px;
        color: #424242;
        position: absolute;
        top: 20px;
        right: 0px;
        text-align: left;
        background-image: url('./index-images/content-right.png');
        background-repeat: no-repeat;
        background-position: 72px 0px;
        cursor: pointer;
    }
    
    .content-family-title-right:hover {
        color: #ff6700;
        background-image: url('./index-images/content-right2.png');
    }
    
    .content-family-goods {
        width: 1226px;
        height: 614px;
        margin: auto;
    }
    
    .content-family-goods_1 {
        float: left;
        transition: ease 0.4s;
        position: relative;
    }
    
    .content-family-goods_1:hover {
        box-shadow: 0px 0px 12px #cccccc;
        transform: translateY(-3px);
    }
    
    .content-family-goods1 {
        float: left;
        position: relative;
        margin-left: 14px;
        margin-bottom: 14px;
        width: 234px;
        height: 300px;
        transition: linear 0.2s;
        background-color: #fff;
    }
    
    .content-family-goods1:hover {
        box-shadow: 0px 5px 12px #cccccc;
        transform: translateY(-3px);
    }
    
    .content-family-goods1 span {
        display: inline-block;
        width: 64px;
        height: 20px;
        position: absolute;
        top: 0px;
        left: 85px;
        color: #fff;
        text-align: center;
        background-color: #ffac13;
        font-size: 12px;
    }
    
    .content-family-goods1 img {
        margin-top: 20px;
        margin-left: 37px;
        width: 160px;
        height: 160px;
    }
    
    .content-family-goods1 p {
        text-align: center;
    }
    
    .content-family-goods1 p:nth-of-type(1) {
        margin-top: 10px;
        font-size: 14px;
        color: #333333;
    }
    
    .content-family-goods1 p:nth-of-type(2) {
        margin-top: 5px;
        font-size: 12px;
        color: #b0b0b0;
    }
    
    .content-family-goods1 p:nth-of-type(3) {
        margin-top: 10px;
        font-size: 12px;
        color: #ff6700;
    }
    /*搭配部分*/
    
    .match {
        width: 1226px;
        height: 672px;
        margin: auto;
        margin-bottom: 21px;
        position: relative;
    }
    
    .match-title-left {
        width: 100%;
        height: 58px;
        font-size: 22px;
        color: #333333;
        line-height: 58px;
        text-align: left;
    }
    
    .match-title-right {
        /*width:300px;*/
        height: 16px;
        font-size: 16px;
        color: #424242;
        position: absolute;
        top: 16px;
        right: 0px;
        text-align: right;
    }
    
    .match-title-right span {
        display: inline-block;
        margin-right: 24px;
        cursor: pointer;
        transition: 0.2s ease;
    }
    
    .match-title-right span:last-child {
        margin: 0px;
    }
    
    .active {
        color: #ff6700;
        border-bottom: 2px solid #ff6700;
    }
    
    .match-content {
        width: 1226px;
        height: 614px;
        margin: auto;
        position: absolute;
        top: 58px;
        left: 0;
    }
    
    .match-content1 {
        float: left;
        position: relative;
        margin-left: 14px;
        margin-bottom: 14px;
        width: 234px;
        height: 300px;
        transition: linear 0.2s;
        background-color: #fff;
        overflow: hidden;
    }
    
    .match-content1:nth-of-type(1) {
        margin-left: 0px;
    }
    
    .match-content1:nth-of-type(6) {
        margin-left: 0px;
    }
    
    .match-right-top {
        width: 234px;
        height: 143px;
        margin-left: 14px;
        margin-bottom: 14px;
        float: left;
        transition: linear 0.2s;
        background-color: #fff;
        position: relative;
    }
    
    .match-right-top img {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 32px;
        right: 20px;
    }
    
    .match-right-top p:nth-of-type(1) {
        margin-left: 30px;
        margin-top: 45px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
    }
    
    .match-right-top p:nth-of-type(2) {
        margin-left: 30px;
        margin-top: 7px;
        font-size: 14px;
        color: #ff6700;
    }
    
    .match-right-bottom {
        width: 234px;
        height: 143px;
        margin-left: 14px;
        float: left;
        transition: linear 0.2s;
        background-color: #fff;
        position: relative;
        background-image: url('./index-images/match-right.png');
        background-repeat: no-repeat;
        background-position: 150px 45px;
    }
    
    .match-right-bottom p:nth-of-type(1) {
        margin-left: 30px;
        margin-top: 50px;
        font-size: 18px;
        color: #333333;
        cursor: pointer;
    }
    
    .match-right-bottom p:nth-of-type(2) {
        margin-left: 30px;
        margin-top: 2px;
        font-size: 12px;
        color: #757575;
        cursor: pointer;
    }
    
    .match-content div:hover {
        box-shadow: 0px 5px 12px #cccccc;
        transform: translateY(-3px);
    }
    
    .match-content1 span {
        display: inline-block;
        width: 64px;
        height: 20px;
        position: absolute;
        top: 0px;
        left: 85px;
        color: #fff;
        text-align: center;
        background-color: #E53935;
        font-size: 12px;
    }
    
    .match-content1 img {
        margin-top: 33px;
        margin-left: 42px;
        width: 150px;
        height: 150px;
    }
    
    .match-content1:nth-of-type(1) img {
        width: 234px;
        height: 300px;
        margin: 0;
    }
    
    .match-content1:nth-of-type(6) img {
        width: 234px;
        height: 300px;
        margin: 0;
    }
    
    .match-content1 p {
        text-align: center;
    }
    
    .match-content1 p:nth-of-type(1) {
        margin-top: 14px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
    }
    
    .match-content1 p:nth-of-type(2) {
        margin-top: 2px;
        font-size: 14px;
        color: #ff6700;
    }
    
    .match-content1 p:nth-of-type(3) {
        margin-top: 10px;
        font-size: 12px;
        color: #b0b0b0;
    }
    /*评价弹窗*/
    
    .evaluate {
        width: 234px;
        height: 76px;
        background-color: #ff6700;
        position: absolute;
        top: 301px;
        left: 0;
    }
    /*为你推荐*/
    
    .mi-foryou {
        width: 1226px;
        height: 358px;
        margin: auto;
        margin-bottom: 22px;
        position: relative;
    }
    
    .mi-foryou-title {
        width: 100%;
        height: 58px;
        font-size: 22px;
        color: #333333;
        line-height: 58px;
        text-align: left;
    }
    
    .mi-foryou-right-button {
        width: 71px;
        height: 24px;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        position: absolute;
        top: 17px;
        right: 0;
    }
    
    .mi-foryou-right-button span {
        display: inline-block;
        float: left;
        width: 34px;
        height: 24px;
        cursor: pointer;
    }
    
    .mi-foryou-right-button span:nth-of-type(1) {
        border-right: 1px solid #e0e0e0;
        background-image: url('./index-images/mi-star-button-left.png');
        background-repeat: no-repeat;
        background-position: 12px 5px;
    }
    
    .mi-foryou-right-button span:nth-of-type(2) {
        background-image: url('./index-images/mi-star-button-right.png');
        background-repeat: no-repeat;
        background-position: 12px 5px;
    }
    
    .mi-foryou-content {
        width: 1226px;
        height: 300px;
        margin: auto;
        overflow: hidden;
    }
    
    .mi-foryou-box {
        width: 2452px;
        height: 340px;
        margin-left: 0;
    }
    
    .mi-foryou-content .mi-foryou-box div {
        width: 234px;
        height: 300px;
        margin-right: 14px;
        float: left;
        box-sizing: border-box;
        background-color: #fff;
        transition: linear 0.2s;
    }
    
    .mi-foryou-box div:hover {
        box-shadow: 0px 2px 3px #e0e0e0;
        transform: translateY(-2px);
    }
    
    .mi-foryou-content .mi-foryou-box div:nth-of-type(5) {
        margin: 0;
    }
    
    .mi-foryou-content .mi-foryou-box div:nth-of-type(10) {
        margin: 0;
    }
    
    .mi-foryou-content .mi-foryou-box div img {
        width: 140px;
        height: 140px;
        margin-top: 40px;
        margin-left: 48px;
    }
    
    .mi-foryou-content .mi-foryou-box div p {
        text-align: center;
        font-size: 12px;
    }
    
    .mi-foryou-content .mi-foryou-box div p:nth-of-type(1) {
        margin-top: 16px;
        font-size: 14px;
        color: #333333;
    }
    
    .mi-foryou-content .mi-foryou-box div p:nth-of-type(2) {
        margin-top: 9px;
        font-size: 14px;
        color: #ff6700;
    }
    
    .mi-foryou-content .mi-foryou-box div p:nth-of-type(3) {
        margin-top: 10px;
        font-size: 14px;
        color: #757575;
    }
    /*热评产品*/
    
    .mi-hot {
        width: 1226px;
        height: 473px;
        margin: auto;
        margin-bottom: 22px;
        position: relative;
    }
    
    .mi-hot-title {
        width: 100%;
        height: 58px;
        font-size: 22px;
        color: #333333;
        line-height: 58px;
        text-align: left;
    }
    
    .mi-hot-content {
        width: 1226px;
        height: 415px;
        margin: auto;
    }
    
    .mi-hot-content-item {
        width: 296px;
        height: 415px;
        margin-right: 14px;
        float: left;
        position: relative;
        transition: linear 0.2s;
        background-color: #fff;
    }
    
    .mi-hot-content-item:hover {
        box-shadow: 0px 5px 12px #cccccc;
        transform: translateY(-3px);
    }
    
    .mi-hot-content-item:last-child {
        margin: 0;
    }
    
    .mi-hot-content-item img {
        width: 296px;
        height: 220px;
    }
    
    .mi-hot-content-item p:nth-of-type(1) {
        font-size: 14px;
        line-height: 24px;
        color: #333333;
        padding: 24px 28px 19px 28px;
        text-align: left;
    }
    
    .mi-hot-content-item p:nth-of-type(2) {
        font-size: 12px;
        color: #b0b0b0;
        position: absolute;
        bottom: 52px;
        left: 28px;
        text-align: left;
    }
    
    .mi-hot-content-item p:nth-of-type(3) {
        font-size: 14px;
        color: #333333;
        position: absolute;
        bottom: 26px;
        left: 28px;
        text-align: left;
    }
    
    .mi-hot-content-item span:nth-of-type(1) {
        height: 15px;
        width: 1px;
        background-color: #b0b0b0;
        position: absolute;
        bottom: 27px;
        left: 183px;
    }
    
    .mi-hot-content-item span:nth-of-type(2) {
        color: #ff6700;
        font-size: 14px;
        position: absolute;
        bottom: 26px;
        left: 192px;
    }
    /*内容*/
    
    .mi-classify {
        width: 1226px;
        height: 478px;
        margin: auto;
        margin-bottom: 22px;
        position: relative;
    }
    
    .mi-classify-title {
        width: 100%;
        height: 58px;
        font-size: 22px;
        color: #333333;
        line-height: 58px;
        text-align: left;
    }
    
    .mi-classify-content {
        width: 1226px;
        height: 420px;
        margin: auto;
    }
    
    .mi-classify-content-item {
        width: 296px;
        height: 420px;
        margin-right: 14px;
        float: left;
        position: relative;
        overflow: hidden;
        transition: linear 0.2s;
        background-color: #fff;
        box-sizing: border-box;
    }
    
    .mi-classify-content-item:hover {
        box-shadow: 0px 5px 10px #cccccc;
        transform: translateY(-2px);
    }
    
    .mi-classify-content-item:last-child {
        margin: 0;
    }
    
    .mi-classify-photo {
        width: 216px;
        height: 154px;
        margin-top: 10px;
        margin-left: 40px;
    }
    
    .mi-classify-first {
        text-align: center;
        margin-top: 47px;
        font-size: 16px;
        cursor: pointer;
    }
    
    .mi-classify-carousel p:nth-of-type(1) {
        text-align: center;
        margin-top: 17px;
        font-size: 20px;
        color: #333333;
        cursor: pointer;
    }
    
    .mi-classify-carousel p:nth-of-type(2) {
        text-align: center;
        height: 40px;
        line-height: 20px;
        margin: 5px 48px 10px;
        font-size: 12px;
        color: #b0b0b0;
        cursor: pointer;
    }
    
    .mi-classify-carousel p:nth-of-type(3) {
        text-align: center;
        font-size: 14px;
        height: 20px;
        color: #333333;
        cursor: pointer;
    }
    /*点击按钮*/
    
    .mi-classify-icon {
        display: inline-block;
        width: 120px;
        height: 20px;
        margin: 20px 90px 0;
    }
    
    .mi-classify-icon span {
        width: 8px;
        height: 8px;
        display: inline-block;
        border: 2px solid #fff;
        background-color: #b9b9b9;
        border-radius: 50%;
        margin-right: 19px;
        cursor: pointer;
    }
    
    .mi-classify-icon span:nth-of-type(1) {
        border: 2px solid #ff7314;
        background-color: #fff;
    }
    
    .mi-classify-icon span:last-child {
        margin: 0px;
    }
    /*点击箭头*/
    
    .mi-classify-left {
        position: absolute;
        top: 183.5px;
        left: 0;
        opacity: 0;
        transition: linear 0.2s;
        cursor: pointer;
    }
    
    .mi-classify-right {
        position: absolute;
        top: 183.5px;
        right: 0;
        opacity: 0;
        transition: linear 0.2s;
        cursor: pointer;
    }
    /*切换内容*/
    
    .mi-classify-landspace {
        width: 1184px;
        height: 283px;
        display: inline-block;
        margin-left: 0px;
    }
    
    .mi-classify-carousel {
        width: 296px;
        height: 283px;
        float: left;
        display: inline-block;
    }
    
    .mi-classify-last p:nth-of-type(3) {
        border: 1px solid #ffac13;
        color: #ffac13;
        width: 120px;
        height: 30px;
        box-sizing: border-box;
        line-height: 30px;
        margin: -20px auto 0;
    }
    
    .mi-classify-last p:nth-of-type(3):hover {
        background-color: #ffac13;
        color: #fff;
    }
    /*视频*/
    
    .mi-video {
        width: 1226px;
        height: 343px;
        margin: auto;
        padding-bottom: 60px;
        position: relative;
    }
    
    .mi-video-left-title {
        width: 100%;
        height: 58px;
        font-size: 22px;
        color: #333333;
        line-height: 58px;
        text-align: left;
    }
    
    .mi-video-right {
        width: 93px;
        height: 23px;
        font-size: 16px;
        color: #424242;
        position: absolute;
        top: 20px;
        right: 0px;
        text-align: left;
        background-image: url('./index-images/content-right.png');
        background-repeat: no-repeat;
        background-position: 72px 0px;
        cursor: pointer;
    }
    
    .mi-video-right:hover {
        color: #ff6700;
        background-image: url('./index-images/content-right2.png');
    }
    
    .mi-video-content {
        width: 1226px;
        height: 285px;
        margin: auto;
    }
    
    .mi-video-content-item {
        width: 296px;
        height: 285px;
        margin-right: 14px;
        float: left;
        position: relative;
        transition: linear 0.2s;
        background-color: #fff;
    }
    
    .mi-video-content-item:hover {
        box-shadow: 0px 5px 12px #cccccc;
        transform: translateY(-3px);
    }
    
    .mi-video-content-item:nth-of-type(1) {
        background-image: url('./index-images/video1.png');
        background-repeat: no-repeat;
    }
    
    .mi-video-content-item:nth-of-type(1):hover {
        background-image: url('./index-images/video1-1.png');
    }
    
    .mi-video-content-item:nth-of-type(2) {
        background-image: url('./index-images/video2.png');
        background-repeat: no-repeat;
    }
    
    .mi-video-content-item:nth-of-type(2):hover {
        background-image: url('./index-images/video2-2.png');
    }
    
    .mi-video-content-item:nth-of-type(3) {
        background-image: url('./index-images/video3.png');
        background-repeat: no-repeat;
    }
    
    .mi-video-content-item:nth-of-type(3):hover {
        background-image: url('./index-images/video3-3.png');
    }
    
    .mi-video-content-item:last-child {
        margin: 0;
        background-image: url('./index-images/video4.png');
        background-repeat: no-repeat;
    }
    
    .mi-video-content-item:nth-of-type(4):hover {
        background-image: url('./index-images/video4-4.png');
    }
    
    .mi-video-content-item p:nth-of-type(1) {
        font-size: 14px;
        color: #333333;
        text-align: center;
        margin-top: 209px;
        cursor: pointer;
    }
    
    .mi-video-content-item p:nth-of-type(1):hover {
        color: #ff6700;
    }
    
    .mi-video-content-item p:nth-of-type(2) {
        font-size: 12px;
        color: #b0b0b0;
        text-align: center;
        margin-top: 7px;
    }
    /*底部内容*/
    
    .footer {
        width: 100%;
        min-width: 1226px;
        margin: auto;
    }
    
    .footer-top {
        width: 100%;
        height: 272px;
        margin: auto;
        background-color: #fff;
    }
    
    .mi-support {
        width: 1226px;
        height: 272px;
        margin: auto;
    }
    
    .mi-support-one {
        padding: 27px 0 50px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .mi-support-one ul {
        list-style-type: none;
    }
    
    .mi-support-one ul li {
        float: left;
        width: 19.8%;
        height: 25px;
        border-left: 1px solid #e0e0e0;
        font-size: 16px;
        line-height: 25px;
        text-align: center;
        color: #777777;
    }
    
    .mi-support-one ul li img {
        width: 25px;
        height: 25px;
    }
    
    .mi-support-one ul li:nth-of-type(1) {
        border-left: 0;
        background-image: url('./index-images/support1.png');
        background-repeat: no-repeat;
        background-position: 55px 0px;
    }
    
    .mi-support-one ul li:nth-of-type(1):hover {
        background-image: url('./index-images/support1-1.png');
    }
    
    .mi-support-one ul li:nth-of-type(2) {
        background-image: url('./index-images/support2.png');
        background-repeat: no-repeat;
        background-position: 55px 0px;
    }
    
    .mi-support-one ul li:nth-of-type(2):hover {
        background-image: url('./index-images/support2-2.png');
    }
    
    .mi-support-one ul li:nth-of-type(3) {
        background-image: url('./index-images/support3.png');
        background-repeat: no-repeat;
        background-position: 55px 0px;
    }
    
    .mi-support-one ul li:nth-of-type(3):hover {
        background-image: url('./index-images/support3-3.png');
    }
    
    .mi-support-one ul li:nth-of-type(4) {
        background-image: url('./index-images/support4.png');
        background-repeat: no-repeat;
        background-position: 55px 0px;
    }
    
    .mi-support-one ul li:nth-of-type(4):hover {
        background-image: url('./index-images/support4-4.png');
    }
    
    .mi-support-one ul li:nth-of-type(5) {
        background-image: url('./index-images/support5.png');
        background-repeat: no-repeat;
        background-position: 48px 0px;
    }
    
    .mi-support-one ul li:nth-of-type(5):hover {
        background-image: url('./index-images/support5-5.png');
    }
    
    .mi-support-one ul li a {
        margin-left: 27px;
        text-decoration: none;
        color: #777777;
    }
    
    .mi-support-two {
        width: 1226px;
        padding: 38px 0;
    }
    
    .mi-support-two ul {
        list-style-type: none;
    }
    
    .mi-support-two ul li {
        float: left;
        width: 160px;
        height: 112px;
    }
    
    .mi-support-two ul li span {
        display: inline-block;
        margin: -4px 0 17px;
        font-size: 14px;
        line-height: 1.25;
        color: #424242;
    }
    
    .mi-support-two ul li p {
        margin: 10px 0 0;
        font-size: 12px;
        color: #757575;
        cursor: pointer;
    }
    
    .mi-support-two ul li p:hover {
        color: #ff6700;
    }
    
    .mi-support-two-phone {
        float: right;
        width: 251px;
        height: 112px;
        border-left: 1px solid #e0e0e0;
        text-align: center;
        color: #616161;
    }
    
    .mi-support-two-phone p:nth-of-type(1) {
        margin: 0 0 5px;
        font-size: 22px;
        line-height: 1;
        color: #ff6700;
    }
    
    .mi-support-two-phone p:nth-of-type(2) {
        font-size: 12px;
        color: #616161;
        margin-bottom: 16px;
    }
    
    .mi-support-two-phone p:nth-of-type(3) {
        width: 118px;
        height: 28px;
        padding-right: 7px;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 28px;
        border: 1px solid #ff6700;
        background: #fff;
        color: #ff6700;
        margin: auto;
        cursor: pointer;
        text-align: right;
        background-image: url('./index-images/service1.png');
        background-repeat: no-repeat;
        background-position: 9px 8px;
    }
    
    .mi-support-two-phone p:nth-of-type(3):hover {
        background: #ff6700;
        color: #fff;
        background-image: url('./index-images/service2.png');
        background-repeat: no-repeat;
        background-position: 9px 8px;
    }
    /*底部信息*/
    
    .footer-bottom {
        width: 100%;
        height: 166px;
        padding: 30px 0;
        box-sizing: border-box;
        background-color: #f5f5f5;
    }
    .footer-info{
        width:1226px;
        margin:auto;
        position: relative;
    }
    .footer-logo{
        width:57px;
        height:57px;
        float: left;
        margin-right:10px;
        background-image: url('./index-images/logo-footer.png');
        background-repeat: no-repeat;
    }
    .footer-bottom-text{
        float: left;
    }
    .footer-bottom-text p{
        line-height: 18px;
        font-size: 12px;
        color:#b0b0b0;
    }
    .footer-bottom-text p a{
        text-decoration:none;
    }
    .footer-bottom-text p:first-child a {
        color:#757575;
    }
    .footer-bottom-text p:last-child a {
        color:#b0b0b0;
    }
    .footer-bottom-text p a:hover{
        color:#ff6700;
    }
    .footer-links{
        float: right;
        height:28px;
        margin:4px 0 0;
    }
    .footer-links img{
        float: right;
        margin-left: 10px;
    }
    .footer-goal{
        clear: both;
        margin:30px auto 0;
        width:267px;
        height:19px;
        font-size: 20px;
        color:#cacaca;
        font-family: 楷体;
        text-align: center;
        position: absolute;
        top:50px;
        left:39%;
        cursor: default;
    }
    </style>
</head>

<body>
    <main>
        <header>
            <nav>
                <ul class="top-ul">
                    <li class="top-li"><a href="javascript:;">小米商城</a></li>
                    <li class="top-li"><a href="javascript:;">MIUI</a></li>
                    <li class="top-li"><a href="javascript:;">米聊</a></li>
                    <li class="top-li"><a href="javascript:;">游戏</a></li>
                    <li class="top-li"><a href="javascript:;">多看阅读</a></li>
                    <li class="top-li"><a href="javascript:;">云服务</a></li>
                    <li class="top-li"><a href="javascript:;">金融</a></li>
                    <li class="top-li"><a href="javascript:;">小米网移动版</a></li>
                    <li class="top-li"><a href="javascript:;">问题反馈</a></li>
                    <li class="top-li"><a href="javascript:;">Select Region</a></li>
                </ul>
                <div class="top-right">
                    <span class="top-right-one">登录</span>
                    <span class="top-right-two">注册</span>
                    <span class="top-right-three">消息通知</span>
                    <span class="top-right-four"> 购物车( 0 )
                <div class="shop">购物车中还没有商品，赶紧选购吧！</div></span>
                </div>
            </nav>
        </header>
        <!-- 导航栏第二部分 -->
        <div class="content_1">
            <div class="content_1-logo"><img src="./index-images/小米logo.png"></div>
            <div class="content_1-pro"><img src="./index-images/pro.gif"></div>
            <ul class="content_1-ul">
                <li class="content_1-li content_1-select" data-index="1"><a href="javascript:;">小米手机</a></li>
                <li class="content_1-li content_1-select" data-index="2"><a href="javascript:;">红米</a></li>
                <li class="content_1-li content_1-select" data-index="3"><a href="javascript:;">平板 · 笔记本</a></li>
                <li class="content_1-li content_1-select" data-index="4"><a href="javascript:;">电视</a></li>
                <li class="content_1-li content_1-select" data-index="5"><a href="javascript:;">盒子 · 影音</a></li>
                <li class="content_1-li content_1-select" data-index="6"><a href="javascript:;">路由器</a></li>
                <li class="content_1-li content_1-select" data-index="7"><a href="javascript:;">智能硬件</a></li>
                <li class="content_1-li"><a href="javascript:;">服务</a></li>
                <li class="content_1-li"><a href="javascript:;">社区</a></li>
            </ul>
            <div class="content_1-search">
                <input type="text" class="search-input">
                <a class="content_1-search-one" href="javascript:;">红米Pro直降400</a>
                <a class="content_1-search-two" href="javascript:;">人工智能电视</a>
                <div class="content_1-search-p"></div>
                <div class="keyword-search">
                    <ul class="keyword-search-list">
                        <li><a href="href:javascript:;">小米手机5<span>约有11件</span></a></li>
                        <li><a href="href:javascript:;">空气净化器2<span>约有1件</span></a></li>
                        <li><a href="href:javascript:;">活塞耳机<span>约有4件</span></a></li>
                        <li><a href="href:javascript:;">小米路由器<span>约有8件</span></a></li>
                        <li><a href="href:javascript:;">移动电源<span>约有21件</span></a></li>
                        <li><a href="href:javascript:;">运动相机<span>约有3件</span></a></li>
                        <li><a href="href:javascript:;">小蚁摄像机<span>约有2件</span></a></li>
                        <li><a href="href:javascript:;">小米体重秤<span>约有1件</span></a></li>
                        <li><a href="href:javascript:;">小米插线板<span>约有13件</span></a></li>
                        <li><a href="href:javascript:;">配件优惠套装<span>约有32件</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 导航栏第二部分下拉菜单 -->
        <div class="content_1-menu">
            <div class="container-menu">
                <!-- 第一个 -->
                <ul id="one" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/5s-110!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米5</p>
                        <p>1999元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/5splus-220!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米5s Plus </p>
                        <p>2299元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mi5!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米手机5 </p>
                        <p>1599元起</p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/maxdingbu!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米Max</p>
                        <p>1299元起
                            <p>
                    </li>
                </ul>
                <!-- 第二个 -->
                <ul id="two" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hongmipro-320!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米Pro</p>
                        <p>1099元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hongminote4!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米Note4 </p>
                        <p>899元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hongmi3s!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米Note3 </p>
                        <p>799元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/note3!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米手机3s</p>
                        <p>699元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/320-220!160x110.jpg" alt="" /></a>
                        </div>
                        <p>红米手机3x</p>
                        <p>799元起
                            <p>
                    </li>
                </ul>
                <!-- 第三个 -->
                <ul id="three" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mipad2-16!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米平板2#X300016GB</p>
                        <p>999元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mipad2-16!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米平板2 32GB </p>
                        <p>1299元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/mipad2-64-win!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米平板2 64GB Window版</p>
                        <p>12599元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/bijiben32012.5!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米笔记本Air 12.5</p>
                        <p>3499元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/bijiben32012.5!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米笔记本Air 13.3</p>
                        <p>4999元起
                            <p>
                    </li>
                </ul>
                <!-- 第四个 -->
                <ul id="four" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101843.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 43英寸</p>
                        <p>1799元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101848.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 48英寸</p>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101855xin.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 55英寸</p>
                        <p>3499元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/101860xin.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 60英寸</p>
                        <p>4499元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/101865xin.png" alt="" /></a>
                        </div>
                        <p>小米电视3s 65英寸</p>
                        <p>4999元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/101865.png" alt="" /></a>
                        </div>
                        <p>查看全部</p>
                        <p>小米电视
                            <p>
                    </li>
                </ul>
                <!-- 第五个 -->
                <ul id="five" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hezimini.png" width="160px" height="110px" alt="" /></a>
                        </div>
                        <p>小米盒子mini版</p>
                        <p>179元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hezi3.png" width="160px" height="110px" alt="" /></a>
                        </div>
                        <p>小米盒子3</p>
                        <p>249元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/hezi3s!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米盒子3 增强版</p>
                        <p>399元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/zhuji!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米电视主机</p>
                        <p>999元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/jinshuban!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米家庭音响 金属版</p>
                        <p>899元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/putonban!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米家庭音响 标准版</p>
                        <p>699元
                            <p>
                    </li>
                </ul>
                <!-- 第六个 -->
                <ul id="six" style="display:none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/miwifi!160x110.jpg" alt="" /></a>
                        </div>
                        <p>全新小米路由器</p>
                        <p>699元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/miwifi-3!160x110.png" alt="" /></a>
                        </div>
                        <p>小米路由器 3 1200M</p>
                        <p>149元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/miwifimini!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米路由器 mini</p>
                        <p>129元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/luyouqi3c!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米路由器 3C 300M</p>
                        <p>99元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/miwifilite!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米路由器 青春版</p>
                        <p>79元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/wifiExtension!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米WiFi放大器</p>
                        <p>39元
                            <p>
                    </li>
                </ul>
                <!-- 第七个 -->
                <ul id="seven" style="display: none">
                    <li>
                        <div>
                            <a href=""><img src="./index-images/scooter!160x110.jpg" alt="" /></a>
                        </div>
                        <p>九号平衡车</p>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/water2!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米净水器</p>
                        <p>1299元起</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/dianfanbao!160x110.jpg" alt="" /></a>
                        </div>
                        <p>米家压力IH电饭煲</p>
                        <p>999元</p>
                    </li>
                    <li>
                        <div>
                            <a href=""><img src="./index-images/air2!160x110.jpg" alt="" /></a>
                        </div>
                        <p>小米空气净化器2</p>
                        <p>699元
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/xiaobaishexiangji!160x110.jpg" alt="" /></a>
                        </div>
                        <p>智能摄像机</p>
                        <p>149元起
                            <p>
                    </li>
                    <li>
                        <div class="last">
                            <a href=""><img src="./index-images/zhinengyingjian!160x110.jpg" alt="" /></a>
                        </div>
                        <p>查看全部</p>
                        <p>智能硬件
                            <p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 导航栏第三部分 -->
        <div class="content_2">
            <!-- 轮播图 -->
            <div class="carousel">
                <div class="carousel_main">
                    <ul class="carousel_ul">
                        <li>
                            <a href="javascript:;" class="img"><img src="./index-images/carousel1.jpg" /></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="img"><img src="./index-images/carousel2.jpg" /></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="img"><img src="./index-images/carousel3.jpg" /></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="img"><img src="./index-images/carousel4.jpg" /></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="img"><img src="./index-images/carousel5.jpg" /></a>
                        </li>
                    </ul>
                </div>
                <p class="carousel_left"></p>
                <p class="carousel_right"></p>
                <div class="carousel_span">
                    <p> <span class="carousel_span_one"></span> <span></span> <span></span><span></span></p>
                </div>
            </div>
            <div class="banner_nav_mask"></div>
            <!-- 左侧列表 -->
            <ul class="content_2-ul">
                <li class="content_2-li"> <span class="content_2-li-span">手机 电话卡</span>
                    <img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-20px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"><span class="content_2-li-span">笔记本 平板</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-62px;left:234px;width:596px">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"> <span class="content_2-li-span">电视 盒子</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-104px;left:234px;width:596px">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"> <span class="content_2-li-span">路由器 智能硬件</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-146px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"> <span class="content_2-li-span">移动电源 电池 插线板</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-188px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"> <span class="content_2-li-span">耳机 音响</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-230px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"> <span class="content_2-li-span">保护套 贴膜</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-272px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"> <span class="content_2-li-span">线材 支架 存储卡</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-314px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"> <span class="content_2-li-span">箱包 服饰</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-356px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
                <li class="content_2-li"><span class="content_2-li-span">米兔 生活周边</span><img class="content_2-li-img" src="./index-images/content_2-right.png" alt="">
                    <div class="content_2-hide" style="top:-398px;left:234px;">
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                        <div>
                            <img src="./index-images/note2_80.jpg" alt="">
                            <span>小米Note 2</span>
                            <span>选购</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 导航下部广告 -->
        <section class="mi-hero">
            <div class="section-left">
                <div class="section-left-box">
                    <img src="./index-images/米选购.png">
                    <p>选购手机</p>
                    <div></div>
                    <div></div>
                </div>
                <div class="section-left-box">
                    <img src="./index-images/米团购.png">
                    <p>企业团购</p>
                    <div></div>
                    <div></div>
                </div>
                <div class="section-left-box">
                    <img src="./index-images/米官翻.png">
                    <p>官翻产品</p>
                    <div></div>
                </div>
                <div class="section-left-box">
                    <img src="./index-images/米移动.png">
                    <p>小米移动</p>
                    <div></div>
                </div>
                <div class="section-left-box">
                    <img src="./index-images/米换新.png">
                    <p>以旧换新</p>
                    <div></div>
                </div>
                <div class="section-left-box">
                    <img src="./index-images/米话费.png">
                    <p>话费充值</p>
                </div>
            </div>
            <div class="section-right">
                <div><img src="./index-images/o2omi.jpg"></div>
                <div><img src="./index-images/minode4.jpg"></div>
                <div><img src="./index-images/mi3s.jpg"></div>
            </div>
        </section>
        <!-- 小米明星单品 -->
        <section class="mi-star">
            <div class="mi-star-title">小米明星单品</div>
            <div class="mi-star-right-button">
                <span></span>
                <span></span>
            </div>
            <div class="mi-star-content">
                <div class="mi-star-box">
                    <div class="mi-star-content_1" style="border-top:1px solid #ffac13">
                        <img src="./index-images/5splus.png">
                        <p>小米5s Plus</p>
                        <p>5.7英寸大屏双摄手机，拍照黑科技</p>
                        <p>2299元起</p>
                    </div>
                    <div class="mi-star-content_2" style="border-top:1px solid #83c44e">
                        <img src="./index-images/max.png">
                        <p>小米Max</p>
                        <p>限量赠标准高透贴膜</p>
                        <p>1799元</p>
                    </div>
                    <div class="mi-star-content_3" style="border-top:1px solid #2196f3">
                        <img src="./index-images/pro.png">
                        <p>红米Pro 十核双摄</p>
                        <p>双摄像头手机，像单反一样去拍照</p>
                        <p>1099元起</p>
                    </div>
                    <div class="mi-star-content_4" style="border-top:1px solid #e53935">
                        <img src="./index-images/bijiben.png">
                        <p>小米笔记本</p>
                        <p>独立显卡、超轻薄、金属机身</p>
                        <p>3499元</p>
                    </div>
                    <div class="mi-star-content_5" style="border-top:1px solid #00c0a5">
                        <img src="./index-images/pad2.png">
                        <p>小米平板2 16GB现货</p>
                        <p>轻薄全金属、海量内容</p>
                        <p>999元</p>
                    </div>
                    <div class="mi-star-content_6" style="border-top:1px solid #ffac13">
                        <img src="./index-images/3s.png">
                        <p>小米电视3s 48英寸</p>
                        <p>原装液晶屏，金属机身</p>
                        <p>1999元</p>
                    </div>
                    <div class="mi-star-content_7" style="border-top:1px solid #83c44e">
                        <img src="./index-images/box3.jpg">
                        <p>小米盒子3 增强版</p>
                        <p>高端 4K 网络机顶盒</p>
                        <p>399元</p>
                    </div>
                    <div class="mi-star-content_8" style="border-top:1px solid #2196f3">
                        <img src="./index-images/led.jpg">
                        <p>米家 LED 智能台灯</p>
                        <p>无可视频闪，亮度色温无级调节</p>
                        <p>169元</p>
                    </div>
                    <div class="mi-star-content_9" style="border-top:1px solid #e53935">
                        <img src="./index-images/vr.png">
                        <p>小米VR眼睛Play</p>
                        <p>逼真沉浸感 舒适观看新体验</p>
                        <p>49元</p>
                    </div>
                    <div class="mi-star-content_10" style="border-top:1px solid #00c0a5">
                        <img src="./index-images/phone.png">
                        <p>米兔定位电话</p>
                        <p>时刻定位，守护你的所爱</p>
                        <p>169元</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <div class="second-div">
        <!-- 智能硬件 -->
        <div class="content-main">
            <div class="content-family">
                <div class="content-family-title-left">智能硬件</div>
                <div class="content-family-title-right">查看全部</div>
                <div class="content-family-goods">
                    <div class="content-family-goods_1">
                        <img src="./index-images/water.jpg">
                    </div>
                    <div class="content-family-goods1">
                        <span class="free">免邮费</span>
                        <img src="./index-images/wifi.jpg">
                        <p>小米路由器</p>
                        <p>四天线设计，更安全更稳定</p>
                        <p>149元</p>
                    </div>
                    <div class="content-family-goods1">
                        <span class="free">免邮费</span>
                        <img src="./index-images/rice.jpg">
                        <p>米家压力IH电饭煲</p>
                        <p>智能烹饪，压力IH加热</p>
                        <p>999元</p>
                    </div>
                    <div class="content-family-goods1">
                        <img src="./index-images/air.jpg">
                        <p>小米空气净化器2</p>
                        <p>高效除霾，10分钟换新房间空气</p>
                        <p>699元</p>
                    </div>
                    <div class="content-family-goods1">
                        <img src="./index-images/balance.jpg">
                        <p>九号平衡车</p>
                        <p>年轻人的酷玩具，骑行遥控两种玩法</p>
                        <p>1999元</p>
                    </div>
                    <div class="content-family-goods1">
                        <img src="./index-images/light.jpg">
                        <p>米家飞利浦智睿台灯二代</p>
                        <p>感知环境光，主动优化场景照明</p>
                        <p>199元</p>
                    </div>
                    <div class="content-family-goods1">
                        <span class="free">免邮费</span>
                        <img src="./index-images/arm.jpg">
                        <p>小米手环 2</p>
                        <p>每天早上十点开售</p>
                        <p>149元</p>
                    </div>
                    <div class="content-family-goods1">
                        <span class="free">免邮费</span>
                        <img src="./index-images/see.jpg">
                        <p>米家小白智能摄像机</p>
                        <p>360度全景拍摄，双向语音通话</p>
                        <p>399元</p>
                    </div>
                    <div class="content-family-goods1">
                        <img src="./index-images/bike.jpg">
                        <p>电助力折叠自行车</p>
                        <p>力矩传感电助力，折叠便携设计</p>
                        <p>2999元</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 搭配 -->
        <div class="match">
            <div class="match-title-left">搭配</div>
            <div class="match-title-right">
                <span class="active">热门</span>
                <span>耳机音箱</span>
                <span>电源</span>
                <span>电池存储卡</span>
            </div>
            <!-- 热门 -->
            <div class="match-content match-one" style="display: block">
                <div class="match-content1">
                    <img src="./index-images/移动电源.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/耳机.jpg">
                    <p>小米圈铁耳机</p>
                    <p>99元</p>
                    <p>2.2万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/插板.jpg">
                    <p>小米插线板</p>
                    <p>49元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>25.8万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">插板还可以，就是口感不行</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 买文博 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/高配.jpg">
                    <p>小米移动电源10000mAh 高配版</p>
                    <p>149元</p>
                    <p>2.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/音箱.jpg">
                </div>
                <div class="match-content1">
                    <span class="free" style="background-color:#83c44e">新品</span>
                    <img src="./index-images/高配套装.jpg">
                    <p>小米移动电源10000mAh高配套...</p>
                    <p>169元</p>
                    <p>359人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2.1万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/小钢炮.jpg">
                    <p>小米小钢炮...</p>
                    <p>99元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>热门</p>
                </div>
            </div>
            <!-- 耳机音箱 -->
            <div class="match-content match-two" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/移动电源.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/银色.jpg">
                    <p>小米圈铁耳机 银色</p>
                    <p>99元</p>
                    <p>2.1万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/胶囊.jpg">
                    <p>小米胶囊耳机</p>
                    <p>69元</p>
                    <p>1.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">你有梦想么</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 建邺旧长安 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/基础.jpg">
                    <p>小米活塞耳机 基础版</p>
                    <p>29元</p>
                    <p>6.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">好丑啊。还发热</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 大佐 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/音箱.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/方盒子.jpg">
                    <p>方盒子音箱</p>
                    <p>89元
                        <del style="color: #b0b0b0;">99元</del>
                    </p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/小米蓝牙.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/睿米车载.jpg">
                    <p>睿米车载蓝...</p>
                    <p>59元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>耳机音响</p>
                </div>
            </div>
            <!-- 电源 -->
            <div class="match-content match-three" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/移动电源.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/耳机.jpg">
                    <p>小米圈铁耳机</p>
                    <p>99元</p>
                    <p>2.2万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/插板.jpg">
                    <p>小米插线板</p>
                    <p>49元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>25.8万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/高配.jpg">
                    <p>小米移动电源10000mAh 高配版</p>
                    <p>149元</p>
                    <p>2.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/音箱.jpg">
                </div>
                <div class="match-content1">
                    <span class="free" style="background-color:#83c44e">新品</span>
                    <img src="./index-images/高配套装.jpg">
                    <p>小米移动电源10000mAh高配套...</p>
                    <p>169元</p>
                    <p>359人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2.1万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/小钢炮.jpg">
                    <p>小米小钢炮...</p>
                    <p>99元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>电源</p>
                </div>
            </div>
            <!-- 电池存储卡 -->
            <div class="match-content match-four" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/移动电源.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/16存储卡.jpg">
                    <p>SanDisk 16GB高速存储卡</p>
                    <p>33.9元</p>
                    <p>4845人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/快充.jpg">
                    <span class="free">享8折</span>
                    <p>原装快充套装</p>
                    <p>58元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>0人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/5号.jpg">
                    <p>彩虹5号电池 ( 10粒装 )</p>
                    <p>9.9元</p>
                    <p>7.6万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/7号.jpg">
                    <p>彩虹5号电池 ( 10粒装 )</p>
                    <p>9.9元</p>
                    <p>4.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/音箱.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/32g.jpg">
                    <p>米兔手机U盘升级版 32GB</p>
                    <p>79元</p>
                    <p>3万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/套装.jpg">
                    <span class="free">享9折</span>
                    <p>镍氢充电电池套装</p>
                    <p>88元
                        <del style="color: #b0b0b0;">98元</del>
                    </p>
                    <p>0人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/充电.jpg">
                    <p>小米车载充电器</p>
                    <p>49元</p>
                    <p>3.4万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/红米2.jpg">
                    <p>红米2/红米2...</p>
                    <p>69元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>电池存储卡</p>
                </div>
            </div>
        </div>
        <!-- 配件 -->
        <div class="match parts">
            <div class="match-title-left">配件</div>
            <div class="match-title-right">
                <span class="active">热门</span>
                <span>保护套</span>
                <span>贴膜</span>
                <span>其他配件</span>
            </div>
            <!-- 热门 -->
            <div class="match-content match-one" style="display: block">
                <div class="match-content1">
                    <img src="./index-images/八折.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/耳机.jpg">
                    <p>小米圈铁耳机</p>
                    <p>99元</p>
                    <p>2.2万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/插板.jpg">
                    <p>小米插线板</p>
                    <p>49元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>25.8万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">插板还可以，就是口感不行</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 买文博 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/高配.jpg">
                    <p>小米移动电源10000mAh 高配版</p>
                    <p>149元</p>
                    <p>2.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/包邮插板.jpg">
                </div>
                <div class="match-content1">
                    <span class="free" style="background-color:#83c44e">新品</span>
                    <img src="./index-images/高配套装.jpg">
                    <p>小米移动电源10000mAh高配套...</p>
                    <p>169元</p>
                    <p>359人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2.1万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/小钢炮.jpg">
                    <p>小米小钢炮...</p>
                    <p>99元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>热门</p>
                </div>
            </div>
            <!-- 保护套 -->
            <div class="match-content match-two" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/八折.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/银色.jpg">
                    <p>小米圈铁耳机 银色</p>
                    <p>99元</p>
                    <p>2.1万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/胶囊.jpg">
                    <p>小米胶囊耳机</p>
                    <p>69元</p>
                    <p>1.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">你有梦想么</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 建邺旧长安 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/基础.jpg">
                    <p>小米活塞耳机 基础版</p>
                    <p>29元</p>
                    <p>6.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">好丑啊。还发热</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 大佐 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/包邮插板.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/方盒子.jpg">
                    <p>方盒子音箱</p>
                    <p>89元
                        <del style="color: #b0b0b0;">99元</del>
                    </p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/小米蓝牙.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/睿米车载.jpg">
                    <p>睿米车载蓝...</p>
                    <p>59元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>保护套</p>
                </div>
            </div>
            <!-- 贴膜 -->
            <div class="match-content match-three" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/八折.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/耳机.jpg">
                    <p>小米圈铁耳机</p>
                    <p>99元</p>
                    <p>2.2万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/插板.jpg">
                    <p>小米插线板</p>
                    <p>49元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>25.8万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/高配.jpg">
                    <p>小米移动电源10000mAh 高配版</p>
                    <p>149元</p>
                    <p>2.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/包邮插板.jpg">
                </div>
                <div class="match-content1">
                    <span class="free" style="background-color:#83c44e">新品</span>
                    <img src="./index-images/高配套装.jpg">
                    <p>小米移动电源10000mAh高配套...</p>
                    <p>169元</p>
                    <p>359人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2.1万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/小钢炮.jpg">
                    <p>小米小钢炮...</p>
                    <p>99元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>贴膜</p>
                </div>
            </div>
            <!-- 其他配件 -->
            <div class="match-content match-four" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/八折.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/16存储卡.jpg">
                    <p>SanDisk 16GB高速存储卡</p>
                    <p>33.9元</p>
                    <p>4845人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/快充.jpg">
                    <span class="free">享8折</span>
                    <p>原装快充套装</p>
                    <p>58元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>0人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/5号.jpg">
                    <p>彩虹5号电池 ( 10粒装 )</p>
                    <p>9.9元</p>
                    <p>7.6万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/7号.jpg">
                    <p>彩虹5号电池 ( 10粒装 )</p>
                    <p>9.9元</p>
                    <p>4.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/包邮插板.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/32g.jpg">
                    <p>米兔手机U盘升级版 32GB</p>
                    <p>79元</p>
                    <p>3万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/套装.jpg">
                    <span class="free">享9折</span>
                    <p>镍氢充电电池套装</p>
                    <p>88元
                        <del style="color: #b0b0b0;">98元</del>
                    </p>
                    <p>0人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/充电.jpg">
                    <p>小米车载充电器</p>
                    <p>49元</p>
                    <p>3.4万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/红米2.jpg">
                    <p>红米2/红米2...</p>
                    <p>69元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>其他配件</p>
                </div>
            </div>
        </div>
        <!-- 周边 -->
        <div class="match around">
            <div class="match-title-left">周边</div>
            <div class="match-title-right">
                <span class="active">热门</span>
                <span>服装</span>
                <span>米兔</span>
                <span>生活周边</span>
                <span>箱包</span>
            </div>
            <!-- 热门 -->
            <div class="match-content match-one" style="display: block">
                <div class="match-content1">
                    <img src="./index-images/秋衣.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/耳机.jpg">
                    <p>小米圈铁耳机</p>
                    <p>99元</p>
                    <p>2.2万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/插板.jpg">
                    <p>小米插线板</p>
                    <p>49元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>25.8万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">插板还可以，就是口感不行</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 买文博 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/高配.jpg">
                    <p>小米移动电源10000mAh 高配版</p>
                    <p>149元</p>
                    <p>2.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/枕头.jpg">
                </div>
                <div class="match-content1">
                    <span class="free" style="background-color:#83c44e">新品</span>
                    <img src="./index-images/高配套装.jpg">
                    <p>小米移动电源10000mAh高配套...</p>
                    <p>169元</p>
                    <p>359人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2.1万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">炸了。。房子都没了</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 基佬程 的评价</p>
                    </div>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/小钢炮.jpg">
                    <p>小米小钢炮...</p>
                    <p>99元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>热门</p>
                </div>
            </div>
            <!-- 服装 -->
            <div class="match-content match-two" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/秋衣.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/银色.jpg">
                    <p>小米圈铁耳机 银色</p>
                    <p>99元</p>
                    <p>2.1万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/胶囊.jpg">
                    <p>小米胶囊耳机</p>
                    <p>69元</p>
                    <p>1.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">你有梦想么</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 建邺旧长安 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/基础.jpg">
                    <p>小米活塞耳机 基础版</p>
                    <p>29元</p>
                    <p>6.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">好丑啊。还发热</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 大佐 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/枕头.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/方盒子.jpg">
                    <p>方盒子音箱</p>
                    <p>89元
                        <del style="color: #b0b0b0;">99元</del>
                    </p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/小米蓝牙.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/睿米车载.jpg">
                    <p>睿米车载蓝...</p>
                    <p>59元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>服装</p>
                </div>
            </div>
            <!-- 米兔 -->
            <div class="match-content match-three" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/秋衣.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/耳机.jpg">
                    <p>小米圈铁耳机</p>
                    <p>99元</p>
                    <p>2.2万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/插板.jpg">
                    <p>小米插线板</p>
                    <p>49元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>25.8万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/高配.jpg">
                    <p>小米移动电源10000mAh 高配版</p>
                    <p>149元</p>
                    <p>2.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/枕头.jpg">
                </div>
                <div class="match-content1">
                    <span class="free" style="background-color:#83c44e">新品</span>
                    <img src="./index-images/高配套装.jpg">
                    <p>小米移动电源10000mAh高配套...</p>
                    <p>169元</p>
                    <p>359人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2.1万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/小钢炮.jpg">
                    <p>小米小钢炮...</p>
                    <p>99元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>米兔</p>
                </div>
            </div>
            <!-- 生活周边 -->
            <div class="match-content match-two" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/秋衣.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/银色.jpg">
                    <p>小米圈铁耳机 银色</p>
                    <p>99元</p>
                    <p>2.1万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">没话说的，音质真的垃圾，很难看，我给59剩下的1分我...</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 Miss殷逗逗 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/胶囊.jpg">
                    <p>小米胶囊耳机</p>
                    <p>69元</p>
                    <p>1.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">你有梦想么</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 建邺旧长安 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/基础.jpg">
                    <p>小米活塞耳机 基础版</p>
                    <p>29元</p>
                    <p>6.7万人评价</p>
                    <div class="evaluate">
                        <p style="display: inline-block;width:172px;margin-top:10px;margin-left:28px;color:#fff;font-size:12px;text-align: left;line-height: 20px">好丑啊。还发热</p>
                        <p style="width:172px;margin-left:28px;color:#fff;opacity: 0.6;font-size: 12px;text-align: left;">来自于 大佐 的评价</p>
                    </div>
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙耳机.jpg">
                    <p>小米蓝牙耳机</p>
                    <p>79元</p>
                    <p>9.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/枕头.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/蓝牙音箱2.jpg">
                    <p>小米小钢炮蓝牙音箱2</p>
                    <p>129元</p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/方盒子.jpg">
                    <p>方盒子音箱</p>
                    <p>89元
                        <del style="color: #b0b0b0;">99元</del>
                    </p>
                    <p>1.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/小米蓝牙.jpg">
                    <p>小米蓝牙音箱</p>
                    <p>199元</p>
                    <p>2万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/睿米车载.jpg">
                    <p>睿米车载蓝...</p>
                    <p>59元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>生活周边</p>
                </div>
            </div>
            <!-- 箱包 -->
            <div class="match-content match-four" style="display: none">
                <div class="match-content1">
                    <img src="./index-images/秋衣.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/16存储卡.jpg">
                    <p>SanDisk 16GB高速存储卡</p>
                    <p>33.9元</p>
                    <p>4845人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/快充.jpg">
                    <span class="free">享8折</span>
                    <p>原装快充套装</p>
                    <p>58元
                        <del style="color: #b0b0b0;">78元</del>
                    </p>
                    <p>0人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/5号.jpg">
                    <p>彩虹5号电池 ( 10粒装 )</p>
                    <p>9.9元</p>
                    <p>7.6万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/7号.jpg">
                    <p>彩虹5号电池 ( 10粒装 )</p>
                    <p>9.9元</p>
                    <p>4.5万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/枕头.jpg">
                </div>
                <div class="match-content1">
                    <img src="./index-images/32g.jpg">
                    <p>米兔手机U盘升级版 32GB</p>
                    <p>79元</p>
                    <p>3万人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/套装.jpg">
                    <span class="free">享9折</span>
                    <p>镍氢充电电池套装</p>
                    <p>88元
                        <del style="color: #b0b0b0;">98元</del>
                    </p>
                    <p>0人评价</p>
                </div>
                <div class="match-content1">
                    <img src="./index-images/充电.jpg">
                    <p>小米车载充电器</p>
                    <p>49元</p>
                    <p>3.4万人评价</p>
                </div>
                <div class="match-right-top">
                    <img src="./index-images/红米2.jpg">
                    <p>红米2/红米2...</p>
                    <p>69元</p>
                </div>
                <div class="match-right-bottom">
                    <p>浏览更多</p>
                    <p>箱包</p>
                </div>
            </div>
        </div>
        <!-- 为你推荐 -->
        <section class="mi-foryou">
            <div class="mi-foryou-title">为你推荐</div>
            <div class="mi-foryou-right-button">
                <span></span>
                <span></span>
            </div>
            <div class="mi-foryou-content">
                <div class="mi-foryou-box">
                    <div class="mi-foryou-content_1">
                        <img src="./index-images/蓝牙音箱2.jpg">
                        <p>小米小钢炮蓝牙音箱2s</p>
                        <p>129元</p>
                        <p>1.5万人好评</p>
                    </div>
                    <div class="mi-foryou-content_2">
                        <img src="./index-images/USB.jpg">
                        <p>USB-C至HDMI多功能转接器</p>
                        <p>149元</p>
                        <p>375人好评</p>
                    </div>
                    <div class="mi-foryou-content_3">
                        <img src="./index-images/活塞.jpg">
                        <p>1MORE入耳式耳机 ( 活塞复...</p>
                        <p>89元</p>
                        <p>2195人好评</p>
                    </div>
                    <div class="mi-foryou-content_4">
                        <img src="./index-images/圈铁.jpg">
                        <p>1MORE三单元圈铁耳机</p>
                        <p>529元</p>
                        <p>80人好评</p>
                    </div>
                    <div class="mi-foryou-content_5">
                        <img src="./index-images/青米.jpg">
                        <p>青米USB快速充电数据线</p>
                        <p>14.9元</p>
                        <p>1.6万人好评</p>
                    </div>
                    <div class="mi-foryou-content_6">
                        <img src="./index-images/低音炮.png">
                        <p>小米低音炮</p>
                        <p>599元</p>
                        <p>5159人好评</p>
                    </div>
                    <div class="mi-foryou-content_7">
                        <img src="./index-images/蓝牙音箱.jpg">
                        <p>小米小钢炮蓝牙音箱青春版</p>
                        <p>99元</p>
                        <p>2359人好评</p>
                    </div>
                    <div class="mi-foryou-content_8">
                        <img src="./index-images/led.jpg">
                        <p>小米蓝牙音箱</p>
                        <p>199元</p>
                        <p>2.1万人好评</p>
                    </div>
                    <div class="mi-foryou-content_9">
                        <img src="./index-images/收音机.jpg">
                        <p>小米网络收音机</p>
                        <p>129元</p>
                        <p>2902人好评</p>
                    </div>
                    <div class="mi-foryou-content_10">
                        <img src="./index-images/金澈.jpg">
                        <p>1MORE金澈耳机</p>
                        <p>89元</p>
                        <p>7878人好评</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 热评产品  -->
        <div class="mi-hot">
            <div class="mi-hot-title">热评产品</div>
            <div class="mi-hot-content">
                <div class="mi-hot-content-item">
                    <img src="./index-images/小米Air.jpg">
                    <p>外观大气漂亮，全金属机身，爱不释手，希望推出更多版本，支持小米！！！</p>
                    <p>来自于 681777的评价</p>
                    <p>小米笔记本Air 12.5尺寸</p>
                    <span></span><span>3499元</span>
                </div>
                <div class="mi-hot-content-item">
                    <img src="./index-images/小米旅行箱.jpg">
                    <p>漂亮，轮子和拉杆都很不错，总的来说非常值得买</p>
                    <p>来自于 大豆子 的评价</p>
                    <p>90分旅行箱 20寸</p>
                    <span></span><span>3499元</span>
                </div>
                <div class="mi-hot-content-item">
                    <img src="./index-images/小米路由3.jpg">
                    <p>我就是喜欢这样的路由器，我每天回到家都要连着WiFi上网，上班就没办法连着呢！每次都等待着下班，我好...</p>
                    <p>来自于 欧阳常 的评价</p>
                    <p>小米路由器3</p>
                    <span></span><span>3499元</span>
                </div>
                <div class="mi-hot-content-item">
                    <img src="./index-images/小米随身蓝牙音箱.jpg">
                    <p>小巧，便携，连接方便还有电量显示！总体很不错，可以挂在自己的包包上用！！也可以放在车里当蓝牙电</p>
                    <p>来自于 佰事柒璽 的评价</p>
                    <p>小米随身蓝牙音箱</p>
                    <span></span><span>3499元</span>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="mi-classify">
            <div class="mi-classify-title">内容</div>
            <div class="mi-classify-content">
                <div class="mi-classify-content-item" style="border-top:1px solid #ffac13">
                    <p class="mi-classify-first" style="color:#ffac13">图书</p>
                    <div class="mi-classify-landspace">
                        <div class="mi-classify-carousel">
                            <p>哈利·波特与魔法石</p>
                            <p>哈利波特来了！</p>
                            <p></p>
                            <img class="mi-classify-photo" src="./index-images/book1.jpg">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>特价专区</p>
                            <p>精选畅销好书，特价促销，天天更新，天天特价！</p>
                            <p>限时优惠</p>
                            <img class="mi-classify-photo" src="./index-images/book2.jpg">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>杂志专区</p>
                            <p>纸媒杂志 + 互联网杂志，你想看的这都有！</p>
                            <p>同步新刊上线</p>
                            <img class="mi-classify-photo" src="./index-images/book3.jpg">
                        </div>
                        <div class="mi-classify-carousel mi-classify-last">
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p style="">前往多看阅读</p>
                        </div>
                    </div>
                    <div class="mi-classify-icon">
                        <span class="dataColor"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="mi-classify-left"><img src="./index-images/mi-classify-left.png"></div>
                    <div class="mi-classify-right"><img src="./index-images/mi-classify-right.png"></div>
                </div>
                <div class="mi-classify-content-item" style="border-top:1px solid #83c44e">
                    <p class="mi-classify-first" style="color:#83c44e">MIUI 主题</p>
                    <div class="mi-classify-landspace">
                        <div class="mi-classify-carousel">
                            <p>小米Note 2</p>
                            <p>小米Note 2官方定制主题 超多侧边栏功能 等你发现</p>
                            <p>免费</p>
                            <img class="mi-classify-photo" src="./index-images/主题1.jpg">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>特价专区</p>
                            <p>精选畅销好书，特价促销，天天更新，天天特价！</p>
                            <p>限时优惠</p>
                            <img class="mi-classify-photo" src="./index-images/book2.jpg">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>杂志专区</p>
                            <p>纸媒杂志 + 互联网杂志，你想看的这都有！</p>
                            <p>同步新刊上线</p>
                            <img class="mi-classify-photo" src="./index-images/book3.jpg">
                        </div>
                        <div class="mi-classify-carousel mi-classify-last">
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p style="">前往多看阅读</p>
                        </div>
                    </div>
                    <div class="mi-classify-icon">
                        <span class="dataColor"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="mi-classify-left"><img src="./index-images/mi-classify-left.png"></div>
                    <div class="mi-classify-right"><img src="./index-images/mi-classify-right.png"></div>
                </div>
                <div class="mi-classify-content-item" style="border-top:1px solid #e53935">
                    <p class="mi-classify-first" style="color:#e53935">游戏</p>
                    <div class="mi-classify-landspace">
                        <div class="mi-classify-carousel">
                            <p>剑侠世界</p>
                            <p>一生不容错过的浪漫武侠 ！！</p>
                            <p>免费</p>
                            <img class="mi-classify-photo" src="./index-images/game1.jpg">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>特价专区</p>
                            <p>精选畅销好书，特价促销，天天更新，天天特价！</p>
                            <p>限时优惠</p>
                            <img class="mi-classify-photo" src="./index-images/book2.jpg">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>杂志专区</p>
                            <p>纸媒杂志 + 互联网杂志，你想看的这都有！</p>
                            <p>同步新刊上线</p>
                            <img class="mi-classify-photo" src="./index-images/book3.jpg">
                        </div>
                        <div class="mi-classify-carousel mi-classify-last">
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p style="">前往多看阅读</p>
                        </div>
                    </div>
                    <div class="mi-classify-icon">
                        <span class="dataColor"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="mi-classify-left"><img src="./index-images/mi-classify-left.png"></div>
                    <div class="mi-classify-right"><img src="./index-images/mi-classify-right.png"></div>
                </div>
                <div class="mi-classify-content-item" style="border-top:1px solid #2196f3">
                    <p class="mi-classify-first" style="color:#2196f3">应用</p>
                    <div class="mi-classify-landspace">
                        <div class="mi-classify-carousel">
                            <p>小米应用</p>
                            <p>小米出品 必属精品</p>
                            <p>免费</p>
                            <img class="mi-classify-photo" src="./index-images/app1.png">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>特价专区</p>
                            <p>精选畅销好书，特价促销，天天更新，天天特价！</p>
                            <p>限时优惠</p>
                            <img class="mi-classify-photo" src="./index-images/book2.jpg">
                        </div>
                        <div class="mi-classify-carousel">
                            <p>杂志专区</p>
                            <p>纸媒杂志 + 互联网杂志，你想看的这都有！</p>
                            <p>同步新刊上线</p>
                            <img class="mi-classify-photo" src="./index-images/book3.jpg">
                        </div>
                        <div class="mi-classify-carousel mi-classify-last">
                            <p>海量好书，享受精品阅读时光</p>
                            <p>漂亮的中文排版，千万读者选择！</p>
                            <p style="">前往多看阅读</p>
                        </div>
                    </div>
                    <div class="mi-classify-icon">
                        <span class="dataColor"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="mi-classify-left"><img src="./index-images/mi-classify-left.png"></div>
                    <div class="mi-classify-right"><img src="./index-images/mi-classify-right.png"></div>
                </div>
            </div>
        </div>
        <!-- 视频 -->
        <div class="mi-video">
            <div class="mi-video-left-title">视频</div>
            <div class="mi-video-right">查看全部</div>
            <div class="mi-video-content">
                <div class="mi-video-content-item">
                    <p>小米5s“暗夜之眼”中的《香港纪实》</p>
                    <p>更锐利、细腻的创作利器</p>
                </div>
                <div class="mi-video-content-item">
                    <p>红米年度品牌视频</p>
                    <p>一亿人喜爱你，是一种责任。</p>
                </div>
                <div class="mi-video-content-item">
                    <p>小米笔记本Air可靠性测试视频</p>
                    <p>小米笔记本Air是如何炼成的？</p>
                </div>
                <div class="mi-video-content-item">
                    <p>小米Max 绝美外观视频</p>
                    <p>6.44" 大屏黄金尺寸，看什么都震撼</p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-top">
            <div class="mi-support">
                <div class="mi-support-one">
                    <ul>
                        <li><a href="href:javascript:;">预约维修服务</a></li>
                        <li><a href="href:javascript:;">7天无理由退货</a></li>
                        <li><a href="href:javascript:;">15天免费换货</a></li>
                        <li><a href="href:javascript:;">满150元包邮</a></li>
                        <li><a href="href:javascript:;">520余家售货网店</a></li>
                    </ul>
                </div>
                <div class="mi-support-two">
                    <ul>
                        <li>
                            <span>帮助中心</span>
                            <p>账户管理</p>
                            <p>购物指南</p>
                            <p>订单操作</p>
                        </li>
                        <li>
                            <span>服务支持</span>
                            <p>售后政策</p>
                            <p>自助服务</p>
                            <p>相关下载</p>
                        </li>
                        <li>
                            <span>线下门店</span>
                            <p>小米之家</p>
                            <p>服务网点</p>
                            <p>零售网点</p>
                        </li>
                        <li>
                            <span>关于小米</span>
                            <p>了解小米</p>
                            <p>加入小米</p>
                            <p>联系我们</p>
                        </li>
                        <li>
                            <span>关注我们</span>
                            <p>新浪微博</p>
                            <p>小米部落</p>
                            <p>官方微信</p>
                        </li>
                        <li>
                            <span>特色服务</span>
                            <p>F 码通道</p>
                            <p>小米移动</p>
                            <p>防伪查询</p>
                        </li>
                    </ul>
                    <div class="mi-support-two-phone">
                        <p>400-100-5678</p>
                        <p>周一至周日 8:00-18:00
                            <br>(仅收市话费)</p>
                        <p>24小时在线客服</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-info">
                <div class="footer-logo"></div>
                <div class="footer-bottom-text">
                    <p>
                        <a href="javascript:;">小米商城</a> | <a href="javascript:;">MIUI</a> | <a href="javascript:;">米聊</a> | <a href="javascript:;">多看书城</a> | <a href="javascript:;">小米路由器</a> | <a href="javascript:;">视频电话</a> | <a href="javascript:;">小米后院</a> | <a href="javascript:;">小米天猫店</a> | <a href="javascript:;">小米淘宝直营店</a> | <a href="javascript:;">小米网盟</a> | <a href="javascript:;">问题反馈</a> | <a href="javascript:;">Select Region</a>
                    </p>
                    <p>©<a href="javascript:;">mi.com</a> 京ICP证110507号 <a href="javascript:;">京ICP备10046444号</a> <a href="javascript:;">京公网安备11010802020134号</a> <a href="javascript:;">京网文[2014]0059-0009号</a><br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                </div>
                <div class="footer-links">
                    <img src="./index-images/links1.png" alt="">
                    <img src="./index-images/links2.png" alt="">
                    <img src="./index-images/links3.png" alt="">
                    <img src="./index-images/links4.png" alt="">
                </div>
                <div class="footer-goal">探索黑科技，小米为发烧而生</div>
            </div>
        </div>
    </div>
</body>

</html>
